<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <div id="app"></div>
    <script>
const container = document.getElementById("app")

let vnode = {
  tag: 'div',
  props: {
    onClick: () => alert("Click me")
  },
  children: [
    {
      tag: 'p',
      props: {
        class: 'name'
      },
      children: "我是一个p标签"
    }
  ]
}

renderer(vnode, container)
/**
 * vnode 虚拟对象
 * container 需要挂载的真实dom
 */
function renderer (vnode,container) {
  const el = document.createElement(vnode.tag)
  console.log(el,"el")
  for (const key in vnode.props) {
    // 如果是事件
    if(/^on/.test(key)){
      el.addEventListener(key.substr(2).toLowerCase(), vnode.props[key])
    }
    el.setAttribute(key,vnode.props[key])
  }
  if(Array.isArray(vnode.children)){
    // 递归的方式调用,渲染子节点
    vnode.children.forEach(child => renderer(child, el))
    
  } else if(typeof vnode.children === 'string'){
    el.appendChild(document.createTextNode(vnode.children))
  }
  // 将虚拟dom挂载到真实的dom元素上
  container.appendChild(el)
}
    </script>
</body>
</html>